<script setup>
import ElCardBg from '@/components/ElCardBg.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, onMounted } from 'vue'
import { pageUserList, delUserApi } from '@/api/talk'

// 分页参数
const pageParams = ref({
  page: 1,
  limit: 5,
  name: ''
})
// 表格数据
const tableData = ref([])
// 总页数
const total = ref(0)
const getUserList = async () => {
  const res = await pageUserList(pageParams.value)
  tableData.value = res.data.records
  total.value = res.data.total
}
onMounted(() => {
  getUserList()
})

// 页码变化了
const handleCurrentChange = () => {
  getUserList()
}

// 模糊匹配
const search = () => {
  getUserList()
}

// 重置
const reset = () => {
  pageParams.value.name = ''
  getUserList()
}

// 删除用户
const delUser = async (id) => {
  ElMessageBox.confirm(`您确定要删除该用户吗？`, `删除用户`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(async () => {
    await delUserApi(id)
    ElMessage.warning('删除成功')
    getUserList()
  })
}
</script>
<template>
  <ElCardBg title="用户管理">
    <template v-slot:content>
      <!-- 操作区域 -->
      <el-row>
        <el-col :span="6" style="margin-right: 10px;">
          <el-form-item label="用户名称：" prop="">
            <el-input placeholder="请输入用户名称" v-model="pageParams.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" style="width: 80px;" @click="search">
            <i class="iconfont icon-sousuo1" style="margin-right: 6px;font-size: 18px;"></i>
            <span style="margin-right: 30px;">搜索</span>
          </el-button>
          <el-button type="info" style="width: 80px;" @click="reset">
            <i class="iconfont icon-zhongzhi" style="margin-right: 8px;font-size: 14px;"></i>
            <span style="margin-right: 30px;">重置</span>
          </el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row style="margin-top: 8px;">
        <el-table :data="tableData" height="458px" :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }">
          <el-table-column prop="id" label="序号" width="100"> </el-table-column>
          <el-table-column prop="name" label="名称" width="160">
            <template #default="scope">
              <span style="color: #8597b4;">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userUrl" label="头像" width="200">
            <template #default="scope">
              <el-avatar shape="square" :size="60" :src="scope.row.userUrl" />
            </template>
          </el-table-column>
          <el-table-column prop="likeCount" label="点赞" width="100">
            <template #default="scope">
              <el-text :size="60" type="primary">{{ scope.row.likeCount }}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="commentCount" label="评论" width="100">
            <template #default="scope">
              <el-text :size="60" type="primary">{{ scope.row.commentCount }}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="210"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="210"></el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="scope">
              <el-button v-permissionDirective type="danger" @click="delUser(scope.row.id)" round plain>
                <i class="iconfont icon-shanchu" style="margin-right: 26px;"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页条区域 -->
      <el-pagination class="pagination" hide-on-single-page :default-page-size="5" background :total="total"
        layout="total, prev, pager, next, jumper" v-model:current-page="pageParams.page"
        @current-change="handleCurrentChange">sxdcsf</el-pagination>
    </template>
  </ElCardBg>
</template>
<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-right: 67px;
}
</style>